<!--
* @description 常住外地
!-->

<!-- 单页面需要多个上传组件 -->
<template>
	<div>
		<el-dialog :title="'决策处置详情'" width='70%' :visible.sync="dialogFormVisible">
			<div>
				<div :class="buttonIndex==1?'button1':'button2'" @click="buttonIndex=1">断裂“总数42”</div>
				<div :class="buttonIndex==2?'button1':'button2'" @click="buttonIndex=2">破损“总数34”</div>
				<div :class="buttonIndex==3?'button1':'button2'" @click="buttonIndex=3">堵塞“总数67”</div>
				<!-- <div class="wrap">
					<div style="font-size:0.14rem;font-weight:700">总抢险数<span style="color:RGBA(255, 235, 58, 1)">22</span>个</div>
					<div>巡检上报28个，未响应处置15个，处置完成15(人工智能处置12个，三级治理中心2个施工处
						置1个)</div>
					<div>预警上报28个，未响应处置15个，处置完成15(人工智能处置12个，三级治理中心2个施工处
						置1个)</div>
					<div>
						新裂22个，破损22个，堵塞33个，垮塌33个，错位个，其他33个</div>

				</div>
				<div class="button2">xxx街道(12)</div> -->
				<!-- 表格 -->
				<div style="margin-top: 10px">
					<el-table :data="tableData" style="width: 100%" class="tableScroll" highlight-current-row @current-change="tableSelect">
						<!-- <el-table-column prop="stationName" label="姓名"></el-table-column> -->
						<el-table-column prop="type" label="隐患位置">
							<template slot-scope="scope">
								<div class="flex-between">
									静观镇
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="formattedAddress" label="隐患描述">
							<template slot-scope="scope">
								<div class="flex-between">
									001号管道破损
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="formattedAddress" label="问题类型">
							<template slot-scope="scope">
								<div class="flex-between">
									破顺类
								</div>
							</template>
						</el-table-column>

						<el-table-column prop="community_name" label="状态">
							<template slot-scope="scope">
								<div class="flex-between">
									未响应
								</div>
							</template>
						</el-table-column>
					
					
					</el-table>
				</div>
				<!-- 分页 -->
				<!-- <div v-if="tableData.total" class="block" style="margin-top: 10px; text-align: right">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="searchList.current" :page-size="searchList.size"
            layout="sizes,total, prev, pager, next, jumper" :page-sizes="[7, 20, 30, 40]"
            :total="Number(tableData.total)"></el-pagination>
        </div> -->
			</div>
			<div slot="footer" class="dialog-footer">
				<!-- <el-button type="primary" @click="confirm()">确 定</el-button>
				<el-button @click="dialogFormVisible = false">取 消</el-button> -->
			</div>
		</el-dialog>
		<!-- <detailComp :title="'家庭成员'" ref="updateComp"></detailComp> -->
		<secondPage ref="secondPage"></secondPage>
	</div>
</template>
<script>
import detailComp from './detail.vue';

import secondPage from '@/components/common/dataScreen/sub/secondPage';
export default {
	name: 'page',
	components: {
		detailComp,
		secondPage,
	},
	props: {
		apiName_params: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			buttonIndex: 1,
			tableData: [{}, {}, {}, {}],
			headerList: [],
			searchList: {
				// current: 1,
				// size: 7,
			},
			inputModel: {},
			infoList: {},
			dialogFormVisible: false,
			dataRow: '',
		};
	},
	created() {},
	methods: {
		secondPageShow(type, area) {
			this.$refs.secondPage.show();
			var params = this.dataParams;
			params.type = type;
			params.area = area;
			setTimeout(() => {
				this.$refs.secondPage.initData(params);
			}, 0);
		},
		hide: function () {
			// this.$emit("refresh");
		},
		detailShow: function (row) {
			const inputModel = row;
			this.$refs.updateComp.show();
			setTimeout(() => {
				this.$refs.updateComp.initData({
					inputModel: inputModel,
				});
			}, 0);
		},
		confirm() {
			this.$emit('saveFn', this.inputModel);
			this.hide();
		},
		/**
		 * 初始化数据
		 */
		initData: function (dataParams) {
			this.tableData = dataParams;
			console.log(11, dataParams);
		},
		show: function (type, id) {
			this.dialogFormVisible = true;
			// this.clearData();
			// this.$emit('hide');
		},
		/**
		 * 关闭弹出框
		 */
		hide: function () {
			// this.clearData();
			this.dialogFormVisible = false;
		},
		//增加搜索条件
		addSearchCriteria(key, value) {
			this.searchList[key] = value;
			console.log(this.searchList);
		},
		tableSelect(val) {
			this.inputModel = val;
		},
		//分页选择每页多少条
		handleSizeChange(val) {
			this.searchList.size = val;
			this.getData();
		},
		//分页当前页
		handleCurrentChange(val) {
			this.searchList.current = val;
			this.getData();
		},
		getData(current) {
			var apiName = 'findList_data_test';

			var params = this.searchList;
			this.$myApi[apiName](params).then((res) => {
				if (res.code == 200) {
					this.tableData = res.data;
				}
			});
		},
	},
};
</script>
<style  scoped>
.wrap {
	background: RGBA(69, 89, 105, 1);
	font-size: 0.12rem;
	color: #ffffff;
	padding: 0.1rem 0.2rem;
	margin-top: 0.1rem;
	margin-bottom: 0.1rem;

}
.button1 {
	background: linear-gradient(180deg, #06455e 0%, #0faad5 100%);
	/* height: 0.27rem; */
	/* width: 2rem; */
	position: relative;
	padding: 0.1rem 0.3rem;
	box-sizing: border-box;
	font-weight: bold;
	font-size: 0.12rem;
	color: #ffffff;
	display: inline-block;
}
.button2 {
	background: RGBA(69, 89, 105, 1);
	/* height: 0.27rem; */
	/* width: 2rem; */
	position: relative;
	padding: 0.1rem 0.3rem;
	box-sizing: border-box;
	font-weight: bold;
	font-size: 0.12rem;
	color: #ffffff;
	display: inline-block;
}
/deep/ .el-dialog__header {
	padding: 20px 20px 10px;
	background: #2d4d7d;

	color: #fff;
}
/deep/ .el-dialog__title {
	color: #fff;
}
/deep/ .el-dialog {
	color: #fff;
	background: #273d6a;
}
/deep/ .el-table__row {
	color: #fff;
	background: #273d6a;
}
/deep/ .el-table__empty-block {
	color: #fff;
	background: #273d6a;
}
/deep/ .el-table th.el-table__cell {
	color: #fff;
	background: #273d6a;
}
</style>
<style>
</style>
